import React from "react"
import { Text, View } from "@tarojs/components"
import GpContainer from "@/components/GpContainer"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpMustReadItem from "@/components/GpMustReadItem"
import GpContactTip from "@/components/GpContactTip"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { Divider } from "@taroify/core"
import Taro from "@tarojs/taro"
import { getKnownDetail } from "@/apis/index"
import { commonUrls } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import clsx from "clsx"
import GpHtmlRenderer from "@/components/GpHtmlRenderer"
import styles from "./index.module.scss"

const ports = [{ text: "百科详情" }]
type IDetail = {
  id: number
  title: string
  time: string
  content: IHtmlBlockContentable["content"]
  introduce: string
  introduce_desc: string
  /** 页面SEO设置的标题 */
  pageTitle: string
}
type IState = {
  detail: IDetail | null
  /** 更多资讯 */
  news: any[]
}
type IData = {
  id: string
}
class TrainGuide extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      detail: null,
      news: []
    }
    this.extData = {
      id: ""
    }
  }
  onShareAppMessage() {}
  onLoad(options: Recordable) {
    this.extData.id = options.id
    this.getDetailData()
  }
  componentDidShow() {
    this.setPageInfo(this.state.detail)
  }
  setPageInfo = (detail: INullable<IDetail>) => {
    if (detail) {
      setPageMeta({
        keywords: "艺考百科，艺考报考流程，艺考报名时间",
        title: `${detail.pageTitle}-择艺宝`,
        description: detail.introduce_desc
      })
    }
  }

  getDetailData = () => {
    Taro.showLoading()
    getKnownDetail(this.extData.id)
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const content = retData.content
          const introduce_desc = (retData.introduce || "").substr(0, 80)
          const detail = {
            id: retData.id,
            time: retData.time,
            title: retData.title,
            content,
            introduce: retData.introduce,
            introduce_desc,
            pageTitle: retData.pageTitle
          }
          this.setPageInfo(detail)
          this.setState({
            news: retData.news,
            detail
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  renderContent = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="bg-hex-fff px-30px pt-20px">
        <View className="yahei-bold font-bold text-40px text-hex-2c2c35 mb-32px leading-50px">
          {detail.pageTitle}
        </View>
        <View className="yahei font-normal text-24px text-hex-b8b8bf">发布时间：{detail.time}</View>
        <Divider className={styles["divider"]} />
        {/* todo.. */}
        <View className="mb-32px">
          <View className="yahei-bold font-bold text-32px mb-32px">导读</View>
          {/* className="yahei leading-48px" */}
          <Text decode userSelect selectable className={styles["textContent"]}>
            {detail.introduce}
          </Text>
        </View>
        <View className="pb-40px">
          {/* className="yahei leading-48px" */}
          {/* <View className="taro_html" dangerouslySetInnerHTML={{ __html: detail.content }}></View> */}
          {detail.content && (
            <View className="taro_html">
              <GpHtmlRenderer htmlBlocks={detail.content.blocks} />
            </View>
          )}
        </View>
        <GpContactTip showContactBtn={false} />
      </View>
    )
  }
  /** 更多资讯 */
  renderMoreNews = () => {
    const { news } = this.state
    const len = news.length
    if (len <= 0) return null
    return (
      <View className="pt-88px pb-57px px-30px bg-hex-fff">
        <View className="pb-34px ">
          <GpBlockTitle title="更多资讯" showArrow navigatorLink={commonUrls.news} />
        </View>
        <View className="flex flex-col">
          {news.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-48px": len !== len - 1
                })}
              >
                <GpMustReadItem mustReadItem={l} />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    if (!this.state.detail) return null
    return (
      <GpContainer>
        <View>
          {this.renderContent()}
          {/* 更多资讯 */}
          {this.renderMoreNews()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default TrainGuide
